<template>
  <div class="searchResult">
    <p v-show="store.state.search.resultList.length==0" class="toast">暂无搜索的物品，请搜索别的好物吧</p>
   
    <ul>
      <li
        v-for="(item, index) in store.state.search.resultList"
        :key="index"
        @click="jumpToGoods(item.id)"
      >
        <div class="img"><img :src="item.s_goods_photos" alt="" /></div>
        <div class="text">
          <h4>{{ item.name }}</h4>
          <p v-show="item.sale_price&&item.price">
                惊爆价￥{{ item.sale_price }} <span style=" text-decoration: line-through;">￥{{ item.price }}</span>
              </p>
              <p v-show="!item.sale_price" style="font-size: 2.5vw;color: #444141;">￥{{ item.price }}</p>
              
          <h5>
            {{ item.assessNum }}00条+评价 <span> 好评率{{ item.assess }}%</span>
          </h5>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>

</script>

<script setup>
import { useStore } from "vuex";
import {
  ref,
  toRefs,
  reactive,
  watch,
  onBeforeMount,
  defineProps,
  inject,
  toRaw,
} from "vue";
import { Dialog } from "vant";
import { Toast } from "vant";

import {
  setSession,
  getSession,
  setLocalSession,
  getLocalSession,
} from "../../../utils/index.js";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";

const props = defineProps({
  resultList: {
    type: Array,
  },
  iptvalue:{
    type: String,
  }
});
console.log(props);
const route = useRoute();
const router = useRouter();
const store = useStore();


let show = ref(false);
const jumpToGoods = (id) => {
  router.push(`/goodsDetail/${id}`);
};

// watch(
//   [() => store.state.search.resultList],
//   (oldData, newData) => {
//     resultList.value = store.state.search.resultList;
//     console.log(111111);
//     //  console.log(oldData, newData);
//   },
//   { immediate: true, deep: true }
// );


onBeforeMount(()=>{

})
</script>

<style scoped lang="scss">
.toast {
  color: #333333;
  margin: 10vh;
}
ul {
  margin-top: 2vh;
  li {
    display: flex;

    margin-bottom: 2vh;
    .img {
      width: 40vw;
      //   height: 20vw;
      img {
        width: 100%;
        display: block;
        height: auto;
      }
    }
    .text {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-bottom: 1px solid #f5f5f5;
      h4,
      p {
        margin: 0;
      }
      h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 4.26vw;
        font-weight: normal;
      }
      p {
        color: red;
        font-size: 3.5vw;
        span {
          font-size: 2.5vw;
          text-decoration: line-through;
          color: #444141;
        }
      }
      h5 {
        margin: 0;
        font-weight: normal;
        color: #999;
        span {
          margin-left: 3vw;
        }
      }
    }
  }
}
</style>
